<template>
	<view class="container">
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-tabs">
				<view class="filter-tab" :class="{ active: filterType === 'all' }" @click="setFilter('all')">
					<text>全部</text>
				</view>
				<view class="filter-tab" :class="{ active: filterType === 'expense' }" @click="setFilter('expense')">
					<text>支出</text>
				</view>
				<view class="filter-tab" :class="{ active: filterType === 'income' }" @click="setFilter('income')">
					<text>收入</text>
				</view>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="stats-card">
			<view class="stats-item">
				<text class="stats-label">总收入</text>
				<text class="stats-amount income">¥{{ totalIncome.toFixed(2) }}</text>
			</view>
			<view class="stats-item">
				<text class="stats-label">总支出</text>
				<text class="stats-amount expense">¥{{ totalExpense.toFixed(2) }}</text>
			</view>
			<view class="stats-item">
				<text class="stats-label">结余</text>
				<text class="stats-amount" :class="totalBalance >= 0 ? 'income' : 'expense'">
					¥{{ totalBalance.toFixed(2) }}
				</text>
			</view>
		</view>

		<!-- 记录列表 -->
		<view class="records-list">
			<view v-if="filteredRecords.length === 0" class="empty-state">
				<text class="empty-text">暂无记录</text>
				<text class="empty-hint">点击右下角按钮开始记账</text>
			</view>
			
			<view v-else>
				<view v-for="(group, date) in groupedRecords" :key="date" class="date-group">
					<view class="date-header">
						<text class="date-text">{{ formatDate(date) }}</text>
						<view class="date-summary">
							<text class="date-income" v-if="getDateIncome(group) > 0">+¥{{ getDateIncome(group).toFixed(2) }}</text>
							<text class="date-expense" v-if="getDateExpense(group) > 0">-¥{{ getDateExpense(group).toFixed(2) }}</text>
						</view>
					</view>
					
					<view v-for="record in group" :key="record.id" class="record-item" @click="editRecord(record)">
						<view class="record-left">
							<view class="category-icon" :style="{ backgroundColor: record.color }">
								<text class="category-text">{{ getCategoryIcon(record.category) }}</text>
							</view>
							<view class="record-info">
								<text class="record-title">{{ record.category }}</text>
								<text class="record-remark" v-if="record.remark">{{ record.remark }}</text>
							</view>
						</view>
						<view class="record-right">
							<text class="record-amount" :class="record.type === 'income' ? 'income' : 'expense'">
								{{ record.type === 'income' ? '+' : '-' }}¥{{ record.amount.toFixed(2) }}
							</text>
							<text class="record-time">{{ formatTime(record.createTime) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 浮动添加按钮 -->
		<view class="fab" @click="addRecord">
			<text class="fab-icon">+</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			filterType: 'all',
			records: []
		}
	},
	computed: {
		filteredRecords() {
			if (this.filterType === 'all') {
				return this.records
			}
			return this.records.filter(record => record.type === this.filterType)
		},
		groupedRecords() {
			const groups = {}
			this.filteredRecords.forEach(record => {
				const date = record.date
				if (!groups[date]) {
					groups[date] = []
				}
				groups[date].push(record)
			})
			return groups
		},
		totalIncome() {
			return this.filteredRecords
				.filter(record => record.type === 'income')
				.reduce((sum, record) => sum + record.amount, 0)
		},
		totalExpense() {
			return this.filteredRecords
				.filter(record => record.type === 'expense')
				.reduce((sum, record) => sum + record.amount, 0)
		},
		totalBalance() {
			return this.totalIncome - this.totalExpense
		}
	},
	onLoad() {
		// 检查登录状态
		if (!this.checkAuth()) return
		this.loadRecords()
	},
	onShow() {
		this.loadRecords()
	},
	methods: {
		loadRecords() {
			this.records = uni.getStorageSync('accounting_records') || []
		},
		setFilter(type) {
			this.filterType = type
		},
		formatDate(dateString) {
			const date = new Date(dateString)
			const today = new Date()
			const yesterday = new Date(today)
			yesterday.setDate(yesterday.getDate() - 1)
			
			if (date.toDateString() === today.toDateString()) {
				return '今天'
			} else if (date.toDateString() === yesterday.toDateString()) {
				return '昨天'
			} else {
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${month}月${day}日`
			}
		},
		formatTime(timeString) {
			const date = new Date(timeString)
			const hours = date.getHours().toString().padStart(2, '0')
			const minutes = date.getMinutes().toString().padStart(2, '0')
			return `${hours}:${minutes}`
		},
		getCategoryIcon(categoryName) {
			const icons = {
				'餐饮': '🍽️', '交通': '🚗', '购物': '🛒', '娱乐': '🎮', '医疗': '💊',
				'教育': '📚', '住房': '🏠', '其他': '📝', '工资': '💰', '奖金': '🎁',
				'投资': '📈', '兼职': '💼'
			}
			return icons[categoryName] || '📝'
		},
		getDateIncome(records) {
			return records
				.filter(record => record.type === 'income')
				.reduce((sum, record) => sum + record.amount, 0)
		},
		getDateExpense(records) {
			return records
				.filter(record => record.type === 'expense')
				.reduce((sum, record) => sum + record.amount, 0)
		},
		addRecord() {
			uni.navigateTo({
				url: '/pages/add/add'
			})
		},
		editRecord(record) {
			uni.showActionSheet({
				itemList: ['编辑', '删除'],
				success: (res) => {
					if (res.tapIndex === 0) {
						uni.showToast({
							title: '编辑功能开发中',
							icon: 'none'
						})
					} else if (res.tapIndex === 1) {
						this.deleteRecord(record.id)
					}
				}
			})
		},
		deleteRecord(recordId) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条记录吗？',
				success: (res) => {
					if (res.confirm) {
						const records = this.records.filter(record => record.id !== recordId)
						uni.setStorageSync('accounting_records', records)
						this.loadRecords()
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		},
		checkAuth() {
			const currentUser = uni.getStorageSync('currentUser')
			if (!currentUser) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.filter-bar {
	background: white;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.filter-tabs {
	display: flex;
	background: #f5f5f5;
	border-radius: 15rpx;
	padding: 5rpx;
}

.filter-tab {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	border-radius: 10rpx;
	transition: all 0.3s;
}

.filter-tab.active {
	background: white;
	color: #667eea;
	font-weight: bold;
}

.stats-card {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
}

.stats-item {
	text-align: center;
	flex: 1;
}

.stats-label {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.stats-amount {
	font-size: 32rpx;
	font-weight: bold;
	display: block;
}

.income {
	color: #4CAF50;
}

.expense {
	color: #F44336;
}

.records-list {
	padding: 0 20rpx;
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	display: block;
	margin-bottom: 20rpx;
}

.empty-hint {
	font-size: 28rpx;
	color: #ccc;
}

.date-group {
	margin-bottom: 30rpx;
}

.date-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.date-text {
	font-size: 28rpx;
	color: #666;
	font-weight: bold;
}

.date-summary {
	display: flex;
	gap: 20rpx;
}

.date-income {
	font-size: 24rpx;
	color: #4CAF50;
}

.date-expense {
	font-size: 24rpx;
	color: #F44336;
}

.record-item {
	background: white;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 15rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.record-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.category-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.category-text {
	font-size: 40rpx;
}

.record-info {
	flex: 1;
}

.record-title {
	font-size: 30rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.record-remark {
	font-size: 24rpx;
	color: #999;
}

.record-right {
	text-align: right;
}

.record-amount {
	font-size: 32rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.record-time {
	font-size: 24rpx;
	color: #999;
}

.fab {
	position: fixed;
	bottom: 50rpx;
	right: 50rpx;
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
}

.fab-icon {
	color: white;
	font-size: 60rpx;
	font-weight: bold;
}
</style>
